<template>
  <div>
    <div class="pics-gallery">
      <!-- swiper1 -->
      <swiper id="gallery" :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
        <swiper-slide v-for="(pic,index) in pics" class="gallery-item cursor-point" :data-src="pic" :key="index">
          <img :src="pic" alt="">
        </swiper-slide>
      </swiper>

      <!-- swiper2 Thumbs -->
      <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
        <swiper-slide v-for="pic in pics" class="cursor-point" :style="{backgroundImage:`url(${pic})`}" :key="pic"></swiper-slide>
        <i class="swiper-button-next color-white el-icon-arrow-down" slot="button-next" style="font-size:48px;background-image:none;margin-left:-15px;"></i>
        <i class="swiper-button-prev color-white el-icon-arrow-up" slot="button-prev" style="font-size:48px;background-image:none;margin-left:-15px;"></i>
      </swiper>
    </div>
    <p class="xui-text-center color-gray xui-margin-top-xs">↑ 点击图片查看大图</p>    
  </div>

</template>

<script>
import ImgBox from "@/components/widge/img-box";
import "lightgallery.js/dist/css/lightgallery.css";
import "lightgallery.js/dist/js/lightgallery.js";
import "@/plugin/lg-zoom.js";
export default {
  props: ["pics"],
  data() {
    return {
      swiperOptionTop: {
        direction: "vertical",
        spaceBetween: 40,
        effect: "fade",
        fadeEffect: {
          crossFade: true
        }
      },
      swiperOptionThumbs: {
        direction: "vertical",
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  methods: {
    initGallery() {
      lightGallery(document.getElementById("gallery"), {
        loop: true,
        fourceAutoply: false,
        autoplay: false,
        thumbnail: false,
        speed: 400,
        scale: 1,
        keypress: true,
        mode: "lg-slide",
        cssEasing: "cubic-bezier(0.25, 0, 0.25, 1)",
        download: false,
        counter: true,
        zoom: true,
        selector: ".gallery-item"
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
      setTimeout(() => {
        this.initGallery();
      }, 500);
    });
  }
};
</script>

<style lang="less" scoped>
.pics-gallery {
  height: 480px;
}
.swiper-container {
  background-color: #f3f3f3;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 100% !important;
  width: 80%;
  float: left;
  .swiper-slide {
    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-height: 480px;
      max-width: 729px;
    }
  }
}
.gallery-thumbs {
  float: left;
  height: 100% !important;
  width: 20%;
  box-sizing: border-box;
  padding: 10px 0 0 5px;
  background: #222;
}
.gallery-thumbs .swiper-slide {
  width: 100%;
  height: 25%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
.swiper-button-prev {
  top: 20px;
  left: 48%;
}
.swiper-button-next {
  bottom: 0px;
  top: auto;
  left: 48%;
}
</style>

